<template>
  <view class="user-row flex flex-nowrap items-center justify-between mb-40rpx">
    <view class="user-row-left flex flex-nowrap items-center">
      <view class="user-row-left-avatar mr-20rpx">
        <wd-img
          custom-class="avatar"
          width="120rpx"
          height="120rpx"
          src="https://img.88icon.com/download/jpg/20200901/3e9ce3813b7199ea9588eeb920f41208_512_512.jpg!bg">
          <template #error>
            <view class="error-wrap">加载失败</view>
          </template>
          <template #loading>
            <view class="loading-wrap">
              <wd-loading></wd-loading>
            </view>
          </template>
        </wd-img>
      </view>
      <view class="user-row-left-name h-120rpx flex flex-wrap">
        <view class="name-row h-44rpx lh-44rpx mt-18rpx flex flex-nowrap items-center"><text class="text-title mr-20rpx">{{ userInfo.nickname }}</text> <img
          style="width: 30rpx;height: 30rpx;flex-shrink: 0;"
          width="30rpx"
          height="30rpx"
          src="@/static/icon/mine/edit.png" /></view>
        <view class="auth-cell flex flex-nowrap justify-center items-center px-8rpx py-4rpx">
          <img src="@/static/icon/mine/auth.png" class="mr-4rpx" style="width: 24rpx;height: 24rpx" />
          <text>{{ userInfo.realAuth ? '已实名认证' : '未实名认证' }}</text>
        </view>
      </view>
    </view>
    <view>
      <wd-badge model-value="1">
        <img src="@/static/icon/mine/msg.png" style="width: 48rpx;height: 48rpx" />
      </wd-badge>

    </view>
  </view>
</template>

<script lang='ts' setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref } from "vue";

const userInfo = reactive({
  nickname: "用户14654654",
  realAuth: false
});
onShow(() => {

});
</script>

<style lang="scss" scoped>
.user-row {
    padding: 0 22rpx;
}

.auth-cell {
    font-size: 22rpx;
    color: var(--color-main);
    border: 2rpx solid var(--color-main);
    border-radius: 8rpx;
}
.name-row {
    width: 100%;
}
.user-row-left-name {
    align-content: space-between;
}
</style>